<template>
  <!-- v-form 代表表单组件，内部可以有许多输入项，v-form 有下面的属性
    value: true 代表表单验证通过，false 代表表单验证失败
    v-form 提供了两个方法：
      reset 重置表单数据
      validate 校验整个表单数据，前提是你写好了校验规则，返回Boolean 表示校验成功或失败
    我们可以在data中定义valid 属性，跟表单的value 进行双向绑定，观察表单是否通过校验，同时把等会要跟表单关联的品牌brand对象声明出来。

    v-text-field 的所有属性
      append-icon  文本框后追加图标
      clearable: 是否添加一个清空图标，点击会清空文本框，默认是false
      color : 颜色
      counter：是否添加一个文本计数器， 在角落显示文本长度，指定true或允许的最大长度，无默认值
      dark: 是否应用黑暗色调， 默认是false
      disable: 是否禁用，默认为false
      flat: 是否移除默认的动画效果，默认是false
      full-width: 指定宽度为全屏， 默认是false
      hide-details: 是否因此错误提示，默认为false
      hint: 输入框的提示文本
      label: 输入框的标签
      multi-line: 是否转为文本域，默认是false, 文本框和文本域可以自由切换
      placeholder: 输入框占位符文本， focus 后消失
      required: 是否位必填项， 如果是，会在label后加*， 不具备校验功能，默认为false
      rows: 文本域的行数， muti-line 为true是才有效。
      rules: 指定校验规则即错误提示信息， 数据结构，默认[]
      single-line: 是否单行文本显示， 默认为false
      suffix: 显示后缀。


  -->
    <v-form v-model="valid" ref="mybrandForm">
      <v-text-field v-model="brand.name" label="品牌名称"  required
        :rules="[v => !!v || '品牌名称不能为空']"
      />
      <v-text-field  v-model="brand.letter" label="品牌收字母" required
           mask="A"         :rules="[v => !!v || '品牌首字母不能为空']" />

      <!-- v-cascader 自定义组件， url 延迟加载数据的地址， itemText 每个选项中用来显示的字段名称 ，itemValue 每个选项中用来作为值的字段名称 children 子选项数组在父选项中的字段名称 multiple 是否允许多选  -->
      <v-cascader
        url="/item/category/list"
        multiple
        required
        v-model="brand.categories"
        lable="请选择商品分类" />

      <!-- v-layou 布局文件，row 以行为单位 ，如果是column代表是多行 -->
      <v-layout row>
        <!-- v-flex 单元格 ，是这一行的单元，xs4,代表占12格中的3格 -->
        <v-flex xs4 class="subheader">品牌LOGO:</v-flex>
        <v-flex >

          <!-- 自定义组件 :　v-upload
          　url: 上传文件的目标路径
            value: 上传成功的返回结果，单图片上传是String, 多图片上传是String 数组
            multiple: 是否允许多图片上传
            picWidth: 单图片上传后的预览宽度
            picHeight : 单图片上传后的预览高度
          　 -->
          <v-upload
            v-model="brand.image"
            url="/upload/image"
            :multiple="false"
            :pic-width="250"
            :pic-height="90"
          />
        </v-flex>
      </v-layout>


      <v-layout row pt-5>
        <v-spacer />
        <v-btn  color="primary" @click="submit">提交</v-btn>
        <v-btn  color="warning"  @click="clear">重置</v-btn>
      </v-layout>
    </v-form>
</template>

<script>

    export default {
      name:"MyBrandForm",
      // 子组件中通过props 接收父组件传递过来的数据，Vue 会自动完成回显
      props:{
        oldBrand: {
          type:Object  // 当是对象的时候，默认值要写成 函数返回
        },
        isEdit: {
            type: Boolean,
            default: false
        }
      },
      data(){
          return {
            valid: false,
            brand: {
              name: '',
              letter: '',
              image: '',
              categories: []
            }
          }
      },
      watch:{  // 通过watch 函数监控oldBrand 的变化， 把值copy 到本地的brand
        // 监控oldBrand 的变化
        oldBrand:{
          deep: true,
          handler:function(val){
            if(val){
              // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy 属性接口
              // Object.deepCopy 自定的对对象进行深度复制的方法，需要判断监听到的是否为空， 如果为空，应该进行初始化
              this.brand = Object.deepCopy(val);
            }else{
              // 为空， 初始化brand
              this.brand = {
                name:'',
                letter: '',
                image: '',
                categories: []
              }
            }
          }

        },


      },
      methods:{

        /**
         *  通过this.$refs.brandForm 选中表单, 然后调用表单的validate方法,进行表单校验,返回 值,true代表校验通过
         *
         *  通过解钩表达式来获取brand 中的值, categories 需要处理,单独获取,其他的存入rest对象中.
         *
         *  弹窗提示成功还是失败, 这里用到的是我们的自定义组件功能 message 组件
         *    这个插件把$message 对象绑定到了Vue 的原型上,因此我们可以通过this.$message 来直接调用
         *      包含以下常用的方法:
         *        info, error, success, warning等,弹出一个带有提示信息的窗口,色调与普通(灰色)错误(红色),成功(绿色)
         *        和警告(黄色). 等使用方法, this.$message.info("msg")
         *      confirm: 确认框, 用法: this.$message.confirm("确认框的提示信息") 返回一个Promise
         *
         */
        submit(){
            // 1. 表达数据进行校验
            if(this.$refs.mybrandForm.validate()){
              // 2. 定义一个请求参数对象，通过解构表达式来获取brand中的属性
              // 解构表达式获取品牌中的数据，除了categories 以外的都储存到rest中
              const {categories,... rest} = this.brand;
              // 3. 数据库只要保存分类的id即可，因此我们对categories 的值进行处理，只保留id，并转为字符串
              // 对categories 进行处理，得到里面的id, 赋值给rest中的categories
              rest.cids = categories.map(c => c.id).join(",") ;
              // 提交rest 就可以了
             /* this.$http.post("/item/brand", this.$qs.stringify(rest))
                .then(resp =>　{
                  // console.log("新增成功");
                  this.$message.success("保存成功!");
                })
                .catch(() => {
                  //console.log("新增失败");
                  this.$message.error("保存失败!");
                })*/
             this.$http({
               method: this.isEdit ? 'put':'post', // 动态判断是POST, 还是PUT
               url: '/item/brand',
               data: this.$qs.stringify(rest)
             }).then(()=> {
               // 关闭窗口
               this.$emit("close");
               this.$message.success("保存成功！");
             }).catch(()=>{
               this.$message.error("保存失败！");
             });

            }
          },
        clear(){
          // 重置表单
          this.$refs.mybrandForm.reset();
          // 需要手动清空商品分类
          this.categories = [];
        },
        // 图片上传出成功后的操作
        handleImageSuccess(res){
          this.brand.image = res ;
        },
        closeWindow(){
          this.$emit("close");
        }
      }
    }
</script>

<style scoped>

</style>
